import React from "react";

/**
 * 加载图片或样式文件
 * */
import './sass/MoreLineHide.scss';


export default class MoreLineHide extends React.Component {
    constructor(props) {
        super(props);
        this.renderLine = this.renderLine.bind(this);
        this.state = {
            moreVisible: true,
            arr: []
        }
    }



    renderLine(){
        const {str, maxHeight, className} = this.props;
        console.log(str);
        let arr = str.replace(/(\r\n|\n|\r)/g, "\n").split('\n');
        this.setState({
            arr: arr
        }, ()=> {
            const introEl = document.querySelector('.' + className);
            console.log('高度溢出:' + (introEl.offsetHeight > maxHeight));
            if (introEl.offsetHeight > maxHeight) {
                this.setState({
                    moreVisible: false
                })
            } else {
                this.setState({
                    moreVisible: true
                })
            }
        });
    }

    render() {
        const {str, maxHeight, className} = this.props;

        return (
            <div className={'more-line '+className + (this.state.moreVisible ? ' more' : '')}>
                {
                    // this.renderLine()
                }
                {
                    this.state.arr.map((item, index) => {
                        return (
                            <p key={index}> { item } </p>
                        )
                    })
                }

                {
                    this.state.moreVisible ? null :
                        <span onClick={()=>this.setState({moreVisible:true})}><em>查阅更多</em></span>
                }
            </div>
        )
    }

}